<template>
    <div class="myorder">
         <Header title="订单"></Header>
         <div class="content">
            <van-tabs :v-model:active="avtive">
                <van-tab v-for="(item,index) in data.navData" :key="index" :title="item" :name="index" >
                    <div v-for="(items,ind) in store.state.Cart.orderListed" :key="ind" v-if="item=='全部' && store.state.Cart.orderListed.length">
                        <van-card
                            :num="items.num"
                            :price="items.price"
                            :title="items.title"
                            :thumb="items.pic"
                        /> 
                    </div> 
                     <Blank v-else></Blank>
                </van-tab>
            </van-tabs>
         
         </div>
         <Footer></Footer>
    </div>


</template>

<script setup>
import { reactive, ref } from 'vue';
import Footer from '../../components/Footer.vue';
import Header from '../../components/Header.vue';
import Blank from '../../components/Blank.vue';
import { useStore } from 'vuex';
let avtive = ref(1)
let activeName = ref(0)
let store=useStore()
console.log(`output->`,store.state.Cart.orderListed)
const data=reactive({
    navData:['全部','交易完成','待付款','待发货','已发货']
})
</script>

<style scoped lang="less">
.myorder{
    display: flex;
    flex-direction: column;
    height: 100%;
    .content{
        flex: 1;
        display: flex;
        width:100%;
        flex-direction: column;
        .van-tabs{
            display: flex;
            flex-direction: column;
            height:100%;
            /deep/.van-tabs__content{
                height:100%;
                display: flex;
            }
            // .Blank_content{
            //     flex:1;
            // }
        }

       
    }
   
}
</style>
